@extends('layouts.header')
@section('title','智慧实验室')
@section('style')
    body{
    height:100%;
    overflow:hidden;
    background-color:rgb(1, 75, 132);
    background: url('/admin/static/myfolder/img/zks/back2.png') no-repeat;
    background-size:100% 100%;
    font-size:100%;
    line-height:2;
    }

    table > thead > tr > th  {
    font-size:110%;
    color: rgb(17, 208, 201);
    font-weight: bold;
    letter-spacing:2px;
    text-align:center;
    }

    table > tbody > tr > td {
    background-color: rgb(1, 75, 132);
    color:#fff;
    border:#fff 1px solid;
    }
@endsection
@section('content')
    <article class="page-container">
        <div style="height: 90%;margin:2% 2%;">
            <input type="text" id="btn" style="width: 0; height: 0;position: absolute; left: -100000">
            <div class="row cl mt-10">
                <div>
                    @for($i=0;$i<($info->channel_count+1);$i++)
                        <a class="btn  radius @if($i == 0) btn-success @else btn-primary @endif size-MINI " onclick="channel(this,{{$i}})">通道{{$i}}</a>
                    @endfor
                </div>
                <div id="buttonPanel" class="mt-5">
                      <span class="c-white">单击下面空白区域显示画面</span>
                      <!-- <input class="btn btn-primary radius size-MINI f-r" id="full_screen_open" type="button" value="打开全屏"> -->
                </div>
                <div id="iframe" class="text-c">
                    <iframe id="iframe_box" src="" frameborder="0" width="78%" height="700px"  scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true" ></iframe>
                </div>
            </div>
        </div>
    </article>
    <script>

        $(function(){
            // $('#iframe_box').attr('src','http://{{$info->server_lan_ip}}/led/ok.html?url=rtsp://{{$info->username}}:{{$info->password}}-{{$info->lan_ip}}:554/Streaming/Channels/001&width=98').reload();
            reloadIframe(0)
        })

        //全屏按钮上调用的方法
        $('#full_screen_open').click(function(){
            // console.log('打开全屏');
            var ele = $("#iframe_box")[0];
            if (ele.requestFullscreen) {
                ele.requestFullscreen();
            } else if (ele.mozRequestFullScreen) {
                ele.mozRequestFullScreen();
            } else if (ele.msRequestFullscreen) {
                ele.msRequestFullscreen();//ie浏览器
            } else if (ele.webkitRequestFullscreen) {
                ele.webkitRequestFullScreen();//谷歌浏览器
            }
        })

         // 监听全屏事件webkitfullscreenchange是谷歌内核的事件；MSFullscreenChange是ie内核的事件
        document.addEventListener('webkitfullscreenchange', function fullscreenChange() {
            if (document.fullscreenEnabled ||
                document.webkitIsFullScreen ||
                document.mozFullScreen ||
                document.msFullscreenElement) {
                console.log('enter fullscreen');
               //可以在这里做一些全屏时的事
            } else {
                console.log('exit fullscreen');
                //可以在这里做一些退出全屏时的事
            }
        }, false);

        function channel(obj,num) {
            $(obj).siblings().removeClass('btn-success').addClass('btn-primary');
            $(obj).removeClass('btn-primary').addClass('btn-success');
            // $('#iframe').html('<iframe id="iframe_box" src="" frameborder="0" width="100%" height="800px"  scrolling="auto" allowfullscreen="true"></iframe>');
            reloadIframe(num);
        }

        function reloadIframe(num){
            let src = 'http://{{$info->server_lan_ip}}/led/ok.html?url=rtsp://{{$info->username}}:{{$info->password}}-{{$info->lan_ip}}:554/Streaming/Channels/'+num+'01&width=98';
            $('#iframe_box').attr('src',src);
        }

    </script>
@endsection